CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳು: ಡೈನಾಮಿಕ್ ಲೇಔಟ್ ಗಾತ್ರವನ್ನು ಮಾಸ್ಟರಿಂಗ್ ಮಾಡುವುದು

CSS ಗ್ರಿಡ್ ಒಂದು ಶಕ್ತಿಯುತ ಲೇಔಟ್ ವ್ಯವಸ್ಥೆಯಾಗಿದ್ದು, ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಸಂಕೀರ್ಣ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ಸುಲಭವಾಗಿ ರಚಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. CSS ಗ್ರಿಡ್‌ನ ನಮ್ಯತೆಯ ಹೃದಯಭಾಗದಲ್ಲಿ ಅದರ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳಿವೆ. ಈ ಫಂಕ್ಷನ್‌ಗಳು, fr, minmax(), auto, ಮತ್ತು fit-content() ಸೇರಿದಂತೆ, ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳ (ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್‌ಗಳು) ಗಾತ್ರವನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲು ಯಾಂತ್ರಿಕತೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ. CSS ಗ್ರಿಡ್ ಅನ್ನು ಮಾಸ್ಟರಿಂಗ್ ಮಾಡಲು ಮತ್ತು ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳು ಮತ್ತು ವಿಷಯದ ವ್ಯತ್ಯಾಸಗಳಿಗೆ ಮನಬಂದಂತೆ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಈ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ನಿರ್ದಿಷ್ಟ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸುವ ಮೊದಲು, ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳು ಯಾವುವು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ. ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಎಂದರೆ ಯಾವುದೇ ಎರಡು ಗ್ರಿಡ್ ಲೈನ್‌ಗಳ ನಡುವಿನ ಸ್ಥಳ. ಕಾಲಮ್‌ಗಳು ಲಂಬ ಟ್ರ್ಯಾಕ್‌ಗಳಾಗಿವೆ, ಮತ್ತು ಸಾಲುಗಳು ಸಮತಲ ಟ್ರ್ಯಾಕ್‌ಗಳಾಗಿವೆ. ಈ ಟ್ರ್ಯಾಕ್‌ಗಳ ಗಾತ್ರವು ಗ್ರಿಡ್‌ನಲ್ಲಿ ವಿಷಯವನ್ನು ಹೇಗೆ ವಿತರಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.

fr ಯುನಿಟ್: ಫ್ರ್ಯಾಕ್ಷನಲ್ ಸ್ಪೇಸ್ (ಭಾಗಶಃ ಸ್ಥಳ)

fr ಯುನಿಟ್ ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಜಾಗದ ಒಂದು ಭಾಗವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಕಾಲಮ್‌ಗಳು ಅಥವಾ ಸಾಲುಗಳು ಉಳಿದ ಜಾಗವನ್ನು ಅನುಪಾತದಲ್ಲಿ ಹಂಚಿಕೊಳ್ಳುವಂತಹ ಫ್ಲೆಕ್ಸಿಬಲ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ. ಎಲ್ಲಾ ಇತರ ಸ್ಥಿರ-ಗಾತ್ರದ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಲೆಕ್ಕಹಾಕಿದ ನಂತರ ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ವಿಭಜಿಸುವ ಒಂದು ಮಾರ್ಗವೆಂದು ಇದನ್ನು ಯೋಚಿಸಿ.

fr ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ನೀವು fr ಬಳಸಿ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದಾಗ, ಬ್ರೌಸರ್ ಒಟ್ಟು ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಗಾತ್ರದಿಂದ ಯಾವುದೇ ಸ್ಥಿರ-ಗಾತ್ರದ ಟ್ರ್ಯಾಕ್‌ಗಳ (ಉದಾ., ಪಿಕ್ಸೆಲ್‌ಗಳು, ems) ಗಾತ್ರವನ್ನು ಕಳೆಯುವ ಮೂಲಕ ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಉಳಿದ ಜಾಗವನ್ನು ನಂತರ fr ಯುನಿಟ್‌ಗಳ ನಡುವೆ ಅವುಗಳ ಅನುಪಾತಗಳ ಪ್ರಕಾರ ವಿಂಗಡಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ: ಸಮಾನ ಕಾಲಮ್‌ಗಳು

ಮೂರು ಸಮಾನ-ಅಗಲದ ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸಲು, ನೀವು ಈ ಕೆಳಗಿನ CSS ಅನ್ನು ಬಳಸಬಹುದು:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

            

              
                Copy
              
            
          

ಈ ಕೋಡ್ ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ಮೂರು ಕಾಲಮ್‌ಗಳ ನಡುವೆ ಸಮಾನವಾಗಿ ವಿಭಜಿಸುತ್ತದೆ. ಗ್ರಿಡ್ ಕಂಟೇನರ್ 600px ಅಗಲವಾಗಿದ್ದರೆ, ಪ್ರತಿಯೊಂದು ಕಾಲಮ್ 200px ಅಗಲವಾಗಿರುತ್ತದೆ (ಯಾವುದೇ ಅಂತರಗಳು ಅಥವಾ ಬಾರ್ಡರ್‌ಗಳಿಲ್ಲವೆಂದು ಭಾವಿಸಿದರೆ).

ಉದಾಹರಣೆ: ಅನುಪಾತದ ಕಾಲಮ್‌ಗಳು

ವಿಭಿನ್ನ ಅನುಪಾತಗಳೊಂದಿಗೆ ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸಲು, ನೀವು ವಿಭಿನ್ನ fr ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಬಹುದು:

            .grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಮೊದಲ ಕಾಲಮ್ ಇತರ ಎರಡು ಕಾಲಮ್‌ಗಳಿಗಿಂತ ಎರಡು ಪಟ್ಟು ಹೆಚ್ಚು ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಗ್ರಿಡ್ ಕಂಟೇನರ್ 600px ಅಗಲವಾಗಿದ್ದರೆ, ಮೊದಲ ಕಾಲಮ್ 300px ಅಗಲವಾಗಿರುತ್ತದೆ, ಮತ್ತು ಇತರ ಎರಡು ಕಾಲಮ್‌ಗಳು ಪ್ರತಿಯೊಂದೂ 150px ಅಗಲವಾಗಿರುತ್ತವೆ.

ಪ್ರಾಯೋಗಿಕ ಬಳಕೆ: ರೆಸ್ಪಾನ್ಸಿವ್ ಸೈಡ್‌ಬಾರ್ ಲೇಔಟ್

fr ಯುನಿಟ್ ರೆಸ್ಪಾನ್ಸಿವ್ ಸೈಡ್‌ಬಾರ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. ಸ್ಥಿರ-ಅಗಲದ ಸೈಡ್‌ಬಾರ್ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶವನ್ನು ಹೊಂದಿರುವ ಲೇಔಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.sidebar {
  /* Sidebar styles */
}

.main-content {
  /* Main content styles */
}

            

              
                Copy
              
            
          

ಈ ಸೆಟಪ್‌ನಲ್ಲಿ, ಸೈಡ್‌ಬಾರ್ ಯಾವಾಗಲೂ 200px ಅಗಲವಾಗಿರುತ್ತದೆ, ಆದರೆ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶವು ಉಳಿದ ಜಾಗವನ್ನು ತುಂಬಲು ವಿಸ್ತರಿಸುತ್ತದೆ. ಈ ಲೇಔಟ್ ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ, ವಿಷಯವು ಯಾವಾಗಲೂ ಅತ್ಯುತ್ತಮವಾಗಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

minmax() ಫಂಕ್ಷನ್: ಫ್ಲೆಕ್ಸಿಬಲ್ ಗಾತ್ರದ ನಿರ್ಬಂಧಗಳು

minmax() ಫಂಕ್ಷನ್ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಾಗಿ ಸ್ವೀಕಾರಾರ್ಹ ಗಾತ್ರಗಳ ಶ್ರೇಣಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದು ಎರಡು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ: ಕನಿಷ್ಠ ಗಾತ್ರ ಮತ್ತು ಗರಿಷ್ಠ ಗಾತ್ರ.

            minmax(min, max)

            

              
                Copy
              
            
          

ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಯಾವಾಗಲೂ ಕನಿಷ್ಠ ಗಾತ್ರದಲ್ಲಿರುತ್ತದೆ, ಆದರೆ ಲಭ್ಯವಿರುವ ಜಾಗವಿದ್ದರೆ ಅದು ಗರಿಷ್ಠ ಗಾತ್ರದವರೆಗೆ ಬೆಳೆಯಬಹುದು. ವಿಭಿನ್ನ ವಿಷಯದ ಉದ್ದಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಈ ಫಂಕ್ಷನ್ ಅಮೂಲ್ಯವಾಗಿದೆ.

ಉದಾಹರಣೆ: ಕಾಲಮ್ ಅಗಲವನ್ನು ಸೀಮಿತಗೊಳಿಸುವುದು

ಕಾಲಮ್ ತುಂಬಾ ಕಿರಿದಾಗದಂತೆ ಅಥವಾ ತುಂಬಾ ಅಗಲವಾಗದಂತೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ನೀವು minmax() ಅನ್ನು ಬಳಸಬಹುದು:

            .grid-container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1fr;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಮೊದಲ ಕಾಲಮ್ ಕನಿಷ್ಠ 200px ಅಗಲವಾಗಿರುತ್ತದೆ, ಆದರೆ ಇದು ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ತುಂಬಲು ಬೆಳೆಯಬಹುದು, 1fr ನಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಉಳಿದ ಜಾಗದ ಒಂದು ಭಾಗದವರೆಗೆ. ಇದು ಚಿಕ್ಕ ಪರದೆಗಳಲ್ಲಿ ಕಾಲಮ್ ತುಂಬಾ ಕಿರಿದಾಗುವುದನ್ನು ಅಥವಾ ದೊಡ್ಡ ಪರದೆಗಳಲ್ಲಿ ಅತಿಯಾಗಿ ಅಗಲವಾಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಎರಡನೇ ಕಾಲಮ್ ಉಳಿದ ಜಾಗವನ್ನು ಒಂದು ಭಾಗವಾಗಿ ಆಕ್ರಮಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: ವಿಷಯ ಓವರ್‌ಫ್ಲೋ ತಡೆಯುವುದು

minmax() ಅನ್ನು ವಿಷಯವು ಅದರ ಕಂಟೇನರ್‌ನಿಂದ ಹೊರಹೋಗುವುದನ್ನು ತಡೆಯಲು ಸಹ ಬಳಸಬಹುದು. ನೀವು ವೇರಿಯಬಲ್ ಪ್ರಮಾಣದ ಪಠ್ಯವನ್ನು ಸರಿಹೊಂದಿಸಬೇಕಾದ ಕಾಲಮ್ ಹೊಂದಿರುವ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ:

            .grid-container {
  display: grid;
  grid-template-columns: 100px minmax(150px, auto) 100px;
}

            

              
                Copy
              
            
          

ಇಲ್ಲಿ, ಮಧ್ಯದ ಕಾಲಮ್ ಕನಿಷ್ಠ 150px ಅಗಲವಾಗಿರುತ್ತದೆ. ವಿಷಯಕ್ಕೆ ಹೆಚ್ಚಿನ ಸ್ಥಳ ಬೇಕಾದರೆ, ಕಾಲಮ್ ಅದನ್ನು ಸರಿಹೊಂದಿಸಲು ವಿಸ್ತರಿಸುತ್ತದೆ. auto ಕೀವರ್ಡ್ ಅನ್ನು ಗರಿಷ್ಠ ಮೌಲ್ಯವಾಗಿ ಬಳಸುವುದು, ಟ್ರ್ಯಾಕ್ ತನ್ನೊಳಗಿನ ವಿಷಯವನ್ನು ಆಧರಿಸಿ ಗಾತ್ರವನ್ನು ಹೊಂದಿಸಲು ಹೇಳುತ್ತದೆ, ವಿಷಯವು ಎಂದಿಗೂ ಓವರ್‌ಫ್ಲೋ ಆಗದಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ. ಬದಿಯಲ್ಲಿರುವ ಎರಡು ಕಾಲಮ್‌ಗಳು 100px ಅಗಲದಲ್ಲಿ ಸ್ಥಿರವಾಗಿರುತ್ತವೆ.

ಪ್ರಾಯೋಗಿಕ ಬಳಕೆ: ರೆಸ್ಪಾನ್ಸಿವ್ ಇಮೇಜ್ ಗ್ಯಾಲರಿ

ನೀವು ಚಿತ್ರಗಳನ್ನು ಒಂದು ಸಾಲಿನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ಬಯಸುವ ಇಮೇಜ್ ಗ್ಯಾಲರಿಯನ್ನು ರಚಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ, ಆದರೆ ಅವು ಚಿಕ್ಕ ಪರದೆಗಳಲ್ಲಿ ತುಂಬಾ ಚಿಕ್ಕದಾಗದಂತೆ ಅಥವಾ ದೊಡ್ಡ ಪರದೆಗಳಲ್ಲಿ ತುಂಬಾ ದೊಡ್ಡದಾಗದಂತೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನೀವು ಬಯಸುತ್ತೀರಿ:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 10px;
}

.grid-item {
  /* Image styles */
}

            

              
                Copy
              
            
          

`repeat(auto-fit, minmax(150px, 1fr))` ಒಂದು ಶಕ್ತಿಯುತ ಸಂಯೋಜನೆಯಾಗಿದೆ. `auto-fit` ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ಆಧರಿಸಿ ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಹೊಂದಿಸುತ್ತದೆ. `minmax(150px, 1fr)` ಪ್ರತಿ ಚಿತ್ರವು ಕನಿಷ್ಠ 150px ಅಗಲವಿದೆ ಮತ್ತು ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ತುಂಬಲು ಬೆಳೆಯಬಹುದು ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ರೆಸ್ಪಾನ್ಸಿವ್ ಇಮೇಜ್ ಗ್ಯಾಲರಿಯನ್ನು ರಚಿಸುತ್ತದೆ, ಸ್ಥಿರವಾದ ವೀಕ್ಷಣೆಯ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಚಿತ್ರಗಳು ವಿರೂಪಗೊಳ್ಳದೆ ಜಾಗವನ್ನು ಸರಿಯಾಗಿ ತುಂಬುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು `.grid-item` CSS ಗೆ `object-fit: cover;` ಸೇರಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

auto ಕೀವರ್ಡ್: ವಿಷಯ-ಆಧಾರಿತ ಗಾತ್ರ

auto ಕೀವರ್ಡ್ ಗ್ರಿಡ್‌ಗೆ ಟ್ರ್ಯಾಕ್‌ನ ಗಾತ್ರವನ್ನು ಅದರೊಳಗಿನ ವಿಷಯವನ್ನು ಆಧರಿಸಿ ನಿರ್ಧರಿಸಲು ಸೂಚಿಸುತ್ತದೆ. ಟ್ರ್ಯಾಕ್ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ವಿಸ್ತರಿಸುತ್ತದೆ, ಆದರೆ ವಿಷಯದ ಕನಿಷ್ಠ ಗಾತ್ರಕ್ಕಿಂತ ಚಿಕ್ಕದಾಗುವುದಿಲ್ಲ.

auto ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ನೀವು auto ಅನ್ನು ಬಳಸಿದಾಗ, ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ನ ಗಾತ್ರವು ಅದರೊಳಗಿನ ವಿಷಯದ ಆಂತರಿಕ ಗಾತ್ರದಿಂದ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ. ವಿಷಯದ ಗಾತ್ರವು ಅನಿರೀಕ್ಷಿತ ಅಥವಾ ವೇರಿಯಬಲ್ ಆಗಿರುವ ಸನ್ನಿವೇಶಗಳಿಗೆ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಉದಾಹರಣೆ: ಪಠ್ಯಕ್ಕಾಗಿ ಫ್ಲೆಕ್ಸಿಬಲ್ ಕಾಲಮ್

ವೇರಿಯಬಲ್ ಪ್ರಮಾಣದ ಪಠ್ಯವನ್ನು ಸರಿಹೊಂದಿಸಬೇಕಾದ ಕಾಲಮ್ ಇರುವ ಲೇಔಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

            .grid-container {
  display: grid;
  grid-template-columns: 200px auto 1fr;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಮೊದಲ ಕಾಲಮ್ 200px ಅಗಲದಲ್ಲಿ ಸ್ಥಿರವಾಗಿದೆ. ಎರಡನೇ ಕಾಲಮ್ ಅನ್ನು auto ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ ಅದು ತನ್ನೊಳಗಿನ ಪಠ್ಯ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ವಿಸ್ತರಿಸುತ್ತದೆ. ಮೂರನೇ ಕಾಲಮ್ ಉಳಿದ ಜಾಗವನ್ನು ಒಂದು ಭಾಗವಾಗಿ ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಫ್ಲೆಕ್ಸಿಬಲ್ ಆಗಿದೆ.

ಉದಾಹರಣೆ: ವೇರಿಯಬಲ್ ಎತ್ತರದ ಸಾಲುಗಳು

ನೀವು ಸಾಲುಗಳಿಗಾಗಿ auto ಅನ್ನು ಸಹ ಬಳಸಬಹುದು. ಎತ್ತರದಲ್ಲಿ ವ್ಯತ್ಯಾಸವಾಗಬಹುದಾದ ವಿಷಯವನ್ನು ಹೊಂದಿರುವ ಸಾಲುಗಳನ್ನು ನೀವು ಹೊಂದಿರುವಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ:

            .grid-container {
  display: grid;
  grid-template-rows: auto auto auto;
}

            

              
                Copy
              
            
          

ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಪ್ರತಿ ಸಾಲು ತನ್ನೊಳಗಿನ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ತನ್ನ ಎತ್ತರವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಹೊಂದಿಸುತ್ತದೆ. ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ಗಳು ಅಥವಾ ವಿವಿಧ ಪ್ರಮಾಣದ ಪಠ್ಯ ಮತ್ತು ಚಿತ್ರಗಳೊಂದಿಗೆ ಲೇಖನಗಳಂತಹ ಡೈನಾಮಿಕ್ ವಿಷಯದೊಂದಿಗೆ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ಸಹಾಯಕವಾಗಿದೆ.

ಪ್ರಾಯೋಗಿಕ ಬಳಕೆ: ರೆಸ್ಪಾನ್ಸಿವ್ ನ್ಯಾವಿಗೇಷನ್ ಮೆನು

ಪ್ರತಿ ಮೆನು ಐಟಂನ ಅಗಲವು ಅದರ ವಿಷಯವನ್ನು ಆಧರಿಸಿ ಸರಿಹೊಂದಿಸುವ ರೆಸ್ಪಾನ್ಸಿವ್ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವನ್ನು ರಚಿಸಲು ನೀವು auto ಅನ್ನು ಬಳಸಬಹುದು:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, auto);
  grid-gap: 10px;
}

.menu-item {
  /* Menu item styles */
}

            

              
                Copy
              
            
          

`repeat(auto-fit, auto)` ಅನ್ನು ಬಳಸುವುದರಿಂದ ಮೆನು ಐಟಂಗಳಿಗೆ ಸರಿಹೊಂದುವಷ್ಟು ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ, ಪ್ರತಿ ಐಟಂನ ಅಗಲವು ಅದರ ವಿಷಯದಿಂದ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ. `auto-fit` ಕೀವರ್ಡ್ ಚಿಕ್ಕ ಪರದೆಗಳಲ್ಲಿ ಐಟಂಗಳು ಮುಂದಿನ ಸಾಲಿಗೆ ಸುತ್ತಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಸರಿಯಾದ ಪ್ರದರ್ಶನ ಮತ್ತು ಸೌಂದರ್ಯಕ್ಕಾಗಿ `menu-item` ಅನ್ನು ಸಹ ಸ್ಟೈಲ್ ಮಾಡಲು ಮರೆಯದಿರಿ.

fit-content() ಫಂಕ್ಷನ್: ವಿಷಯ-ಆಧಾರಿತ ಗಾತ್ರವನ್ನು ಸೀಮಿತಗೊಳಿಸುವುದು

fit-content() ಫಂಕ್ಷನ್ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ನ ಗಾತ್ರವನ್ನು ಅದರ ವಿಷಯವನ್ನು ಆಧರಿಸಿ ಸೀಮಿತಗೊಳಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಒಂದೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ: ಟ್ರ್ಯಾಕ್ ಆಕ್ರಮಿಸಬಹುದಾದ ಗರಿಷ್ಠ ಗಾತ್ರ. ಟ್ರ್ಯಾಕ್ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ವಿಸ್ತರಿಸುತ್ತದೆ, ಆದರೆ ಇದು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಗರಿಷ್ಠ ಗಾತ್ರವನ್ನು ಎಂದಿಗೂ ಮೀರುವುದಿಲ್ಲ.

            fit-content(max-size)

            

              
                Copy
              
            
          

fit-content() ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

fit-content() ಫಂಕ್ಷನ್ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ನ ಗಾತ್ರವನ್ನು ಅದರೊಳಗಿನ ವಿಷಯವನ್ನು ಆಧರಿಸಿ ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಟ್ರ್ಯಾಕ್‌ನ ಗಾತ್ರವು ಫಂಕ್ಷನ್‌ನ ಆರ್ಗ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಗರಿಷ್ಠ ಗಾತ್ರವನ್ನು ಎಂದಿಗೂ ಮೀರುವುದಿಲ್ಲ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: ಕಾಲಮ್ ವಿಸ್ತರಣೆಯನ್ನು ಸೀಮಿತಗೊಳಿಸುವುದು

ಕಾಲಮ್ ಅದರ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ವಿಸ್ತರಿಸಲು ನೀವು ಬಯಸುವ ಲೇಔಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ, ಆದರೆ ಅದು ತುಂಬಾ ಅಗಲವಾಗಬಾರದು ಎಂದು ನೀವು ಬಯಸುತ್ತೀರಿ:

            .grid-container {
  display: grid;
  grid-template-columns: 100px fit-content(300px) 1fr;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಎರಡನೇ ಕಾಲಮ್ ಅದರ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ವಿಸ್ತರಿಸುತ್ತದೆ, ಆದರೆ ಇದು ಎಂದಿಗೂ 300px ಅಗಲವನ್ನು ಮೀರುವುದಿಲ್ಲ. ವಿಷಯಕ್ಕೆ 300px ಗಿಂತ ಹೆಚ್ಚು ಅಗತ್ಯವಿದ್ದರೆ, ಕಾಲಮ್ 300px ನಲ್ಲಿ ಕ್ಲಿಪ್ ಆಗುತ್ತದೆ (ನೀವು ಗ್ರಿಡ್ ಐಟಂನಲ್ಲಿ `overflow: visible` ಅನ್ನು ಹೊಂದಿಸದಿದ್ದರೆ). ಮೊದಲ ಕಾಲಮ್ ಸ್ಥಿರ ಅಗಲದಲ್ಲಿ ಉಳಿಯುತ್ತದೆ, ಮತ್ತು ಅಂತಿಮ ಕಾಲಮ್ ಉಳಿದ ಜಾಗವನ್ನು ಒಂದು ಭಾಗವಾಗಿ ಪಡೆಯುತ್ತದೆ.

ಉದಾಹರಣೆ: ಸಾಲಿನ ಎತ್ತರವನ್ನು ನಿಯಂತ್ರಿಸುವುದು

ನೀವು ಸಾಲುಗಳ ಎತ್ತರವನ್ನು ನಿಯಂತ್ರಿಸಲು fit-content() ಅನ್ನು ಸಹ ಬಳಸಬಹುದು:

            .grid-container {
  display: grid;
  grid-template-rows: fit-content(200px) 1fr;
}

            

              
                Copy
              
            
          

ಇಲ್ಲಿ, ಮೊದಲ ಸಾಲು ಅದರ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ವಿಸ್ತರಿಸುತ್ತದೆ, ಆದರೆ ಇದು ಎಂದಿಗೂ 200px ಎತ್ತರವನ್ನು ಮೀರುವುದಿಲ್ಲ. ಎರಡನೇ ಸಾಲು ಒಟ್ಟು ಲಭ್ಯವಿರುವ ಎತ್ತರದ ಒಂದು ಭಾಗವಾಗಿ ಉಳಿದ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.

ಪ್ರಾಯೋಗಿಕ ಬಳಕೆ: ರೆಸ್ಪಾನ್ಸಿವ್ ಕಾರ್ಡ್ ಲೇಔಟ್

fit-content() ರೆಸ್ಪಾನ್ಸಿವ್ ಕಾರ್ಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಉಪಯುಕ್ತವಾಗಿದೆ, ಅಲ್ಲಿ ನೀವು ಕಾರ್ಡ್‌ಗಳು ತಮ್ಮ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ವಿಸ್ತರಿಸಲು ಬಯಸುತ್ತೀರಿ, ಆದರೆ ನೀವು ಅವುಗಳ ಅಗಲವನ್ನು ಸೀಮಿತಗೊಳಿಸಲು ಬಯಸುತ್ತೀರಿ:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, fit-content(300px)));
  grid-gap: 10px;
}

.card {
  /* Card styles */
}

            

              
                Copy
              
            
          

ಈ ಕೋಡ್ ರೆಸ್ಪಾನ್ಸಿವ್ ಕಾರ್ಡ್ ಲೇಔಟ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಅಲ್ಲಿ ಪ್ರತಿ ಕಾರ್ಡ್ ಕನಿಷ್ಠ 200px ಅಗಲವಿರುತ್ತದೆ ಮತ್ತು ಅದರ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ವಿಸ್ತರಿಸಬಹುದು, ಗರಿಷ್ಠ 300px ವರೆಗೆ. `repeat(auto-fit, ...)` ಕಾರ್ಡ್‌ಗಳು ಚಿಕ್ಕ ಪರದೆಗಳಲ್ಲಿ ಮುಂದಿನ ಸಾಲಿಗೆ ಸುತ್ತಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ರಿಪೀಟ್ ಫಂಕ್ಷನ್‌ನೊಳಗೆ, `minmax` ಜೊತೆಗೆ `fit-content` ಅನ್ನು ಬಳಸುವುದು ಇನ್ನೂ ಹೆಚ್ಚಿನ ಮಟ್ಟದ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ - ಐಟಂಗಳು ಯಾವಾಗಲೂ 200px ನ ಕನಿಷ್ಠ ಅಗಲವನ್ನು ಹೊಂದಿರುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಆದರೆ 300px ಗಿಂತ ಅಗಲವಾಗಿರುವುದಿಲ್ಲ (ಒಳಗಿನ ವಿಷಯವು ಈ ಮೌಲ್ಯವನ್ನು ಮೀರದಿದ್ದರೆ). ಈ ತಂತ್ರವು ವಿಶೇಷವಾಗಿ ಮೌಲ್ಯಯುತವಾಗಿದೆ, ನೀವು ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ ಸ್ಥಿರವಾದ ನೋಟ ಮತ್ತು ಅನುಭವವನ್ನು ಬಯಸಿದರೆ. ಅಪೇಕ್ಷಿತ ನೋಟವನ್ನು ಸಾಧಿಸಲು `.card` ವರ್ಗವನ್ನು ಸೂಕ್ತವಾದ ಪ್ಯಾಡಿಂಗ್, ಮಾರ್ಜಿನ್‌ಗಳು ಮತ್ತು ಇತರ ದೃಶ್ಯ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಸ್ಟೈಲ್ ಮಾಡಲು ಮರೆಯಬೇಡಿ.

ಸುಧಾರಿತ ಲೇಔಟ್‌ಗಳಿಗಾಗಿ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು

CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳ ನಿಜವಾದ ಶಕ್ತಿಯು ಸಂಕೀರ್ಣ ಮತ್ತು ಡೈನಾಮಿಕ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅವುಗಳನ್ನು ಸಂಯೋಜಿಸುವುದರಿಂದ ಬರುತ್ತದೆ. fr, minmax(), auto, ಮತ್ತು fit-content() ಅನ್ನು ಯುದ್ಧತಂತ್ರವಾಗಿ ಬಳಸುವ ಮೂಲಕ, ನೀವು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಫ್ಲೆಕ್ಸಿಬಲ್ ವಿನ್ಯಾಸಗಳನ್ನು ಸಾಧಿಸಬಹುದು.

ಉದಾಹರಣೆ: ಮಿಶ್ರಿತ ಯುನಿಟ್‌ಗಳು ಮತ್ತು ಫಂಕ್ಷನ್‌ಗಳು

ಸ್ಥಿರ-ಅಗಲದ ಸೈಡ್‌ಬಾರ್, ಫ್ಲೆಕ್ಸಿಬಲ್ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶ, ಮತ್ತು ಅದರ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ವಿಸ್ತರಿಸುವ ಆದರೆ ಗರಿಷ್ಠ ಅಗಲವನ್ನು ಹೊಂದಿರುವ ಕಾಲಮ್‌ನೊಂದಿಗೆ ಲೇಔಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr fit-content(400px);
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಮೊದಲ ಕಾಲಮ್ 200px ನಲ್ಲಿ ಸ್ಥಿರವಾಗಿದೆ. ಎರಡನೇ ಕಾಲಮ್ 1fr ಬಳಸಿ ಉಳಿದ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಮೂರನೇ ಕಾಲಮ್ ಅದರ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ವಿಸ್ತರಿಸುತ್ತದೆ ಆದರೆ fit-content(400px) ಬಳಸಿ 400px ನ ಗರಿಷ್ಠ ಅಗಲಕ್ಕೆ ಸೀಮಿತವಾಗಿದೆ.

ಉದಾಹರಣೆ: ಸಂಕೀರ್ಣ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ

ಹೆಡರ್, ಸೈಡ್‌ಬಾರ್, ಮುಖ್ಯ ವಿಷಯ ಮತ್ತು ಫೂಟರ್‌ನೊಂದಿಗೆ ವೆಬ್‌ಸೈಟ್ ಲೇಔಟ್‌ನ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಉದಾಹರಣೆಯನ್ನು ರಚಿಸೋಣ:

            .grid-container {
  display: grid;
  grid-template-columns: minmax(150px, 250px) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  height: 100vh;
}

header {
  grid-area: header;
  /* Header styles */
}

.sidebar {
  grid-area: sidebar;
  /* Sidebar styles */
}

main {
  grid-area: main;
  /* Main content styles */
}

footer {
  grid-area: footer;
  /* Footer styles */
}

            

              
                Copy
              
            
          

ಈ ಲೇಔಟ್‌ನಲ್ಲಿ:

• grid-template-columns ಎರಡು ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ: 150px ಕನಿಷ್ಠ ಅಗಲ ಮತ್ತು 250px ಗರಿಷ್ಠ ಅಗಲದೊಂದಿಗೆ ಸೈಡ್‌ಬಾರ್, ಮತ್ತು 1fr ಬಳಸಿ ಉಳಿದ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುವ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶ.
• grid-template-rows ಮೂರು ಸಾಲುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ: ತಮ್ಮ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ (auto) ತಮ್ಮ ಎತ್ತರವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಹೊಂದಿಸುವ ಹೆಡರ್ ಮತ್ತು ಫೂಟರ್, ಮತ್ತು 1fr ಬಳಸಿ ಉಳಿದ ಲಂಬ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುವ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶ.
• grid-template-areas ಪ್ರಾಪರ್ಟಿ ಹೆಸರಿಸಲಾದ ಗ್ರಿಡ್ ಪ್ರದೇಶಗಳನ್ನು ಬಳಸಿ ಲೇಔಟ್ ರಚನೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.

ಈ ಉದಾಹರಣೆಯು ಫ್ಲೆಕ್ಸಿಬಲ್ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್‌ಸೈಟ್ ಲೇಔಟ್ ಅನ್ನು ರಚಿಸಲು ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳು ಮತ್ತು ಗ್ರಿಡ್ ಪ್ರದೇಶಗಳನ್ನು ಹೇಗೆ ಸಂಯೋಜಿಸುವುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಸರಿಯಾದ ದೃಶ್ಯ ಪ್ರಸ್ತುತಿಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಪ್ರತಿ ವಿಭಾಗಕ್ಕೆ (ಹೆಡರ್, ಸೈಡ್‌ಬಾರ್, ಮುಖ್ಯ, ಫೂಟರ್) ಸೂಕ್ತವಾದ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ.

CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳಿಂದ ಹೆಚ್ಚಿನದನ್ನು ಪಡೆಯಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ವಿಷಯಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಿ: ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಗಳನ್ನು ನಿರ್ಧರಿಸುವಾಗ ಯಾವಾಗಲೂ ವಿಷಯಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಿ. ಲೇಔಟ್ ವಿಷಯಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳಬೇಕು, ಬೇರೆ ರೀತಿಯಲ್ಲ.
• ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್‌ಗಾಗಿ minmax() ಬಳಸಿ: ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳಿಗೆ ಸ್ವೀಕಾರಾರ್ಹ ಗಾತ್ರಗಳ ಶ್ರೇಣಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು minmax() ಬಳಸಿ, ಅವು ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳು ಮತ್ತು ವಿಷಯ ವ್ಯತ್ಯಾಸಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಯುದ್ಧತಂತ್ರವಾಗಿ ಸಂಯೋಜಿಸಿ: ಸಂಕೀರ್ಣ ಮತ್ತು ಡೈನಾಮಿಕ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸಿ. ಉದಾಹರಣೆಗೆ, ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ಅಗಲದ ನಿರ್ಬಂಧಗಳನ್ನು ಹೊಂದಿರುವ ಫ್ಲೆಕ್ಸಿಬಲ್ ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸಲು minmax() ಮತ್ತು fr ಅನ್ನು ಒಟ್ಟಿಗೆ ಬಳಸಿ.
• ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳು ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.
• ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳು ಅಂಗವಿಕಲರು ಸೇರಿದಂತೆ ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಬಳಸಿ ಮತ್ತು ಚಿತ್ರಗಳಿಗೆ ಪರ್ಯಾಯ ಪಠ್ಯವನ್ನು ಒದಗಿಸಿ.
• ಗ್ರಿಡ್ ಇನ್ಸ್‌ಪೆಕ್ಟರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ: ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ನಿಮ್ಮ ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ದೃಶ್ಯೀಕರಿಸಲು ಮತ್ತು ಡೀಬಗ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುವ ಅಂತರ್ನಿರ್ಮಿತ ಗ್ರಿಡ್ ಇನ್ಸ್‌ಪೆಕ್ಟರ್ ಪರಿಕರಗಳನ್ನು ಹೊಂದಿವೆ. ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳು ನಿಮ್ಮ ಲೇಔಟ್ ಮೇಲೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತಿವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಈ ಪರಿಕರಗಳು ಅಮೂಲ್ಯವಾಗಿರಬಹುದು.

CSS ಗ್ರಿಡ್‌ಗಾಗಿ ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ, ಸಾಂಸ್ಕೃತಿಕ ವ್ಯತ್ಯಾಸಗಳು ಮತ್ತು ಪ್ರಾದೇಶಿಕ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಮುಖ್ಯ. CSS ಗ್ರಿಡ್‌ಗೆ ನಿರ್ದಿಷ್ಟವಾದ ಕೆಲವು ಪರಿಗಣನೆಗಳು ಇಲ್ಲಿವೆ:

• ಲೇಔಟ್ ನಿರ್ದೇಶನ (direction ಪ್ರಾಪರ್ಟಿ): direction ಪ್ರಾಪರ್ಟಿಯನ್ನು ಗ್ರಿಡ್ ಲೇಔಟ್‌ನ ದಿಕ್ಕನ್ನು ಬದಲಾಯಿಸಲು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಅರೇಬಿಕ್ ಮತ್ತು ಹೀಬ್ರೂನಂತಹ ಬಲದಿಂದ ಎಡಕ್ಕೆ (RTL) ಭಾಷೆಗಳಲ್ಲಿ, ಲೇಔಟ್ ದಿಕ್ಕನ್ನು ಹಿಮ್ಮುಖಗೊಳಿಸಲು ನೀವು direction: rtl; ಅನ್ನು ಹೊಂದಿಸಬಹುದು. CSS ಗ್ರಿಡ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲೇಔಟ್ ದಿಕ್ಕಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ, ಲೇಔಟ್ ವಿವಿಧ ಭಾಷೆಗಳಲ್ಲಿ ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್ (inset-inline-start, inset-inline-end, ಇತ್ಯಾದಿ): left ಮತ್ತು right ನಂತಹ ಭೌತಿಕ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುವ ಬದಲು, inset-inline-start ಮತ್ತು inset-inline-end ನಂತಹ ತಾರ್ಕಿಕ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ. ಈ ಗುಣಲಕ್ಷಣಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲೇಔಟ್ ದಿಕ್ಕಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ, ಲೇಔಟ್ LTR ಮತ್ತು RTL ಭಾಷೆಗಳಲ್ಲಿ ಸ್ಥಿರವಾಗಿರುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• ಫಾಂಟ್ ಗಾತ್ರಗಳು: ನಿಮ್ಮ ಗ್ರಿಡ್ ಅಂಶಗಳಲ್ಲಿ ಬಳಸಲಾಗುವ ಫಾಂಟ್ ಗಾತ್ರಗಳ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ವಿಭಿನ್ನ ಭಾಷೆಗಳಿಗೆ ಅತ್ಯುತ್ತಮ ಓದುವಿಕೆಗಾಗಿ ವಿಭಿನ್ನ ಫಾಂಟ್ ಗಾತ್ರಗಳು ಬೇಕಾಗಬಹುದು. ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳ ಆಧಾರದ ಮೇಲೆ ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು ಸ್ಕೇಲ್ ಮಾಡಲು em ಅಥವಾ rem ನಂತಹ ಸಂಬಂಧಿತ ಘಟಕಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ದಿನಾಂಕ ಮತ್ತು ಸಂಖ್ಯೆಯ ಸ್ವರೂಪಗಳು: ನಿಮ್ಮ ಗ್ರಿಡ್ ಲೇಔಟ್ ದಿನಾಂಕಗಳು ಅಥವಾ ಸಂಖ್ಯೆಗಳನ್ನು ಒಳಗೊಂಡಿದ್ದರೆ, ಬಳಕೆದಾರರ ಸ್ಥಳೀಯತೆಗೆ ಅನುಗುಣವಾಗಿ ಅವುಗಳನ್ನು ಸರಿಯಾಗಿ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಬಳಕೆದಾರರ ಭಾಷೆ ಮತ್ತು ಪ್ರದೇಶದ ಸೆಟ್ಟಿಂಗ್‌ಗಳ ಪ್ರಕಾರ ದಿನಾಂಕಗಳು ಮತ್ತು ಸಂಖ್ಯೆಗಳನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ ಸರ್ವರ್-ಸೈಡ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ.
• ಚಿತ್ರಗಳು ಮತ್ತು ಐಕಾನ್‌ಗಳು: ಕೆಲವು ಚಿತ್ರಗಳು ಮತ್ತು ಐಕಾನ್‌ಗಳು ವಿವಿಧ ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿ ವಿಭಿನ್ನ ಅರ್ಥಗಳನ್ನು ಅಥವಾ ಸೂಚ್ಯಾರ್ಥಗಳನ್ನು ಹೊಂದಿರಬಹುದು ಎಂಬುದನ್ನು ಗಮನದಲ್ಲಿರಲಿ. ಆಕ್ಷೇಪಾರ್ಹ ಅಥವಾ ಸಾಂಸ್ಕೃತಿಕವಾಗಿ ಸೂಕ್ಷ್ಮವಲ್ಲದ ಚಿತ್ರಗಳು ಅಥವಾ ಐಕಾನ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಉದಾಹರಣೆಗೆ, ಒಂದು ಸಂಸ್ಕೃತಿಯಲ್ಲಿ ಸಕಾರಾತ್ಮಕವೆಂದು ಪರಿಗಣಿಸಲಾದ ಕೈ ಸನ್ನೆ ಮತ್ತೊಂದು ಸಂಸ್ಕೃತಿಯಲ್ಲಿ ಆಕ್ಷೇಪಾರ್ಹವೆಂದು ಪರಿಗಣಿಸಬಹುದು.
• ಅನುವಾದ ಮತ್ತು ಸ್ಥಳೀಕರಣ: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಬಹು ಭಾಷೆಗಳಲ್ಲಿ ಲಭ್ಯವಿದ್ದರೆ, ಶೀರ್ಷಿಕೆಗಳು, ಲೇಬಲ್‌ಗಳು ಮತ್ತು ವಿಷಯ ಸೇರಿದಂತೆ ನಿಮ್ಮ ಗ್ರಿಡ್ ಲೇಔಟ್‌ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಪಠ್ಯವನ್ನು ಅನುವಾದಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಅನುವಾದ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸುಗಮಗೊಳಿಸಲು ಮತ್ತು ವಿವಿಧ ಭಾಷೆಗಳಲ್ಲಿ ಸ್ಥಿರತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಅನುವಾದ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ತೀರ್ಮಾನ

CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳು ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳು ಮತ್ತು ವಿಷಯ ವ್ಯತ್ಯಾಸಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಡೈನಾಮಿಕ್ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅತ್ಯಗತ್ಯ ಸಾಧನಗಳಾಗಿವೆ. fr, minmax(), auto, ಮತ್ತು fit-content() ಅನ್ನು ಮಾಸ್ಟರಿಂಗ್ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಎಲ್ಲಾ ಸಾಧನಗಳು ಮತ್ತು ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಸ್ಥಿರ ಮತ್ತು ಆಕರ್ಷಕ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುವ ಸಂಕೀರ್ಣ ಮತ್ತು ಫ್ಲೆಕ್ಸಿಬಲ್ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ವಿಷಯಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಲು, ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್‌ಗಾಗಿ minmax() ಅನ್ನು ಬಳಸಲು, ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಯುದ್ಧತಂತ್ರವಾಗಿ ಸಂಯೋಜಿಸಲು, ಮತ್ತು ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕ ಮತ್ತು ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ. ಭಾಷೆ ಮತ್ತು ಸಂಸ್ಕೃತಿಗಾಗಿ ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳನ್ನು ಪರಿಗಣಿಸುವ ಮೂಲಕ, ನೀವು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದಾದ ಮತ್ತು ಆಕರ್ಷಕವಾದ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು.

ಅಭ್ಯಾಸ ಮತ್ತು ಪ್ರಯೋಗದೊಂದಿಗೆ, ನೀವು CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳ ಸಂಪೂರ್ಣ ಶಕ್ತಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳನ್ನು ಉನ್ನತೀಕರಿಸುವ ಮತ್ತು ನಿಮ್ಮ ಪ್ರೇಕ್ಷಕರಿಗೆ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುವ ಬೆರಗುಗೊಳಿಸುವ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು.